import { gsap } from "gsap";
import * as THREE from "three";

export default class Flyline {
  constructor(position = { x: 0, z: 0 }) {
    // 2.设置曲线顶点
    let linePoints = [
      new THREE.Vector3(0, 0, 0),
      new THREE.Vector3(position.x / 2, 4, position.z / 2),
      new THREE.Vector3(position.x, 0, position.z),
    ];
    // 1.创建曲线
    this.lineCurve = new THREE.CatmullRomCurve3(linePoints);
    // 3.有了曲线后，根据曲线设置管道几何体
    // 参数可在官网文档查看
    this.geometry = new THREE.TubeGeometry(this.lineCurve, 100, 0.4, 2, false);
    // 4.设置飞线材质
    // 设置纹理
    const textloader = new THREE.TextureLoader();
    this.texture = textloader.load("./textures/z_11.png");
    // 在y轴上重复两遍，同时还要翻转过来，就是镜像和水平重复
    this.texture.repeat.set(1, 2);
    // 镜像
    this.texture.wrapS = THREE.RepeatWrapping;
    // 水平
    this.texture.wrapT = THREE.MirroredRepeatWrapping;

    // 同时设置透明度，不然白色背景很明显
    this.material = new THREE.MeshBasicMaterial({
      map: this.texture,
      transparent: true,
    });
    // 5.创建飞线物体
    this.mesh = new THREE.Mesh(this.geometry, this.material);

    gsap.to(this.texture.offset, {
      x: -1,
      duration: 1,
      repeat: -1,
      ease: "none",
    });
  }
  remove() {
    this.mesh.remove();
    this.mesh.removeFromParent();
    this.mesh.geometry.dispose();
    this.mesh.material.dispose();
  }
}
